/**
 * 折线图和累积图
 */

import React from 'react';
import { findDOMNode } from 'react-dom';
import merge from 'lodash/object/merge';
import isEqual from 'lodash/lang/isEqual'
import Highcharts from 'Highcharts';

export default class LineAreaChart extends React.Component {
	static defaultProps = {
		title: '',
		subtitle: '',
		yAxisTitle: '',
	};

	options = {};

/**
	 * @virtual 获取图表需要的Series数组的虚方法
	 * @return {array} 非横轴数据数组
	 */
	getSeries() {
		return [];
	}

    /**
     * @virtual 获取图表横轴数据
     * @return {array} 横轴数据数组
     */
    getCategories(props) {
        let { dataSource } = props;
        return dataSource.categories;
    }

	componentWillReceiveProps(nextProps, nextState) {
		let { title, subtitle, yAxisTitle, dataSource, height = 400 } = nextProps;
		let series = this.getSeries(nextProps);

		this.options = {
			chart: {
				zoomType: 'xy',
			},
			title: {
				text: title
			},
			subtitle: {
				text: subtitle
			},
			xAxis: [{
				categories: this.getCategories(nextProps), // dataSource.categories,
				crosshair: true
			}],
			yAxis: [{ // Primary yAxis
				labels: {
					// format: '{value}°C',
					style: {
						// color: Highcharts.getOptions().colors[0]
					}
				},
				title: {
					text: '',
					style: {
						// color: Highcharts.getOptions().colors[0]
					}
				}
			}, { // Secondary yAxis
				title: {
					text: '',
					style: {
						color: Highcharts.getOptions().colors[1]
					}
				},
				labels: {
					format: '{value} %',
					style: {
						color: Highcharts.getOptions().colors[1]
					}
				},
				opposite: true
            }, { // third yAxis
                title: {
                    text: '',
                },
                opposite: true
            }],
			tooltip: {
				shared: true
			},
			plotOptions: {
				area: {
					marker: {
						enabled: false
					}
	            }
			},
			// legend: {
			// 	layout: 'vertical',
			// 	align: 'left',
			// 	x: 120,
			// 	verticalAlign: 'top',
			// 	y: 30,
			// 	floating: true,
			// 	backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
			// },
			series
		};
	}

	componentDidUpdate(prevProps, prevState) {
		let domNode = findDOMNode(this.refs['chartContainer']);

		Highcharts.chart(domNode, this.options);
	}

	shouldComponentUpdate(nextProps, nextState) {
		return !isEqual(nextProps.dataSource, this.props.dataSource);
	}

	constructor(props) {
		super(props);
	}

	render() {
		return (
			<div ref='chartContainer'></div>
		)
	}
}
